<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>

    <style>
        body {
            font-family: Deng;
            line-height: 1.2;
            font-size:12px;
            /*font-weight:normal*/
            /*设置背景色*/
            /*background: #00FF00 ;*/
            /*设置背景图片*/
            /*background-image:url() no-repeat fixed top;*/
        }

        /*旋转div试例*/
        .rotate_div{
            margin:100px;
            width:200px;
            height:100px;
            background-color:yellow;
            /* Rotate div */
            transform:rotate(90deg);
        }

        table{
            table-layout:auto;
            border-collapse:collapse;
            width:100%;
            -fs-table-paginate:paginate;
            page-break-inside:auto;
            border: 1px;
        }

        tr { page-break-inside:avoid; page-break-after:auto; padding: 0; font-size: 8px;border: 1px}
        td{
            border-collapse:collapse;
            word-wrap: break-word;
            padding: 0;
            font-size: 9px;
            border: 1px

        }
        th{
            border-collapse:collapse;
            word-wrap:  break-word;
            border: 1px
        }
        /* 以上为构件通用设置 */
        .page::before{
            content: counter(page) "/" counter(pages);
        }
        /* page页设置 */
        @page {
            size: A4 landscape;
            -fs-flow-top: "header";
            -fs-flow-bottom: "footer";
            -fs-flow-left: "left";
            -fs-flow-right: "right";
            /* 盒子边框 */
            border: 0pt solid black;
            /* 盒子边距 */
            margin:1.5cm;
            padding-top:10px;
            padding-left: -100000px;


            @top-left{
                content: element(top-left);

            }

            @left-top{
                content: element(left-top);
                margin: 0px;
                padding: 0px;

            }

            @top-left-corner{
                content: element(top-left-corner);
            }
            @top-right-corner{
                content: element(top-right-corner);
            }
            @left-bottom {
                font-size: 12px;
                content: element(left-bottom);
            }
            @bottom-left-corner{
                content: element(bottom-left-corner);
            }
            /*@left-bottom-corner {*/
            /*    content: "页码/总页数:                        "  counter(page) "/" counter(pages);*/
            /*}*/

        }
        /* 第一页设置，会覆盖通用设置 */
        @media print {
            /* 选择器设置样式，输出到文档的样式 */
            div.left-top{
                display: block;
                position: running(left-top);
                margin: 0px;
                padding: 0px;
            }

            div.top-left{
                display: block;
                position: running(top-left);
                margin-top: 0.5cm;
                margin-right: 0.5cm;
                /**transform:rotate(90deg);*/
            }

            div.top-left-corner{
                display: block;
                position: running(top-left-corner);
                margin-top: 0.5cm;
                margin-left: 2.5cm;
                /**transform:rotate(90deg);*/
            }
            div.top-right-corner{
                display: block;
                position: running(top-right-corner);
                margin-top: 0.5cm;
                /**transform:rotate(90deg);*/
            }
            div.bottom-left-corner{
                display: block;
                position: running(bottom-left-corner);
                margin-bottom: 0.5cm;
                margin-left: 30px;
            }
            div.top_info{
                height: 50px;
            }
            div.left_info{
                float: left;
                width: 50%;
            }
            div.right_info{
                width: 50%;
                text-align: right;
                display: inline-block;
            }
            div.bottom_info{
                margin-top: 10px;
            }
            div.dn_info{
                margin: 5px 0px 15px 0px;
            }
            span.font_small_bold {
                font-size: 8px;
                font-weight:bold;
            }

            span.font_small {
                font-size: 8px;
            }

            span.font_middle {
                font-size: 20px;
            }

            span.font_middle_bold {
                font-size: 20px;
                font-weight:bold;
            }

        }
        /*强制分页 如果不使用分页符，可在块中追加分页样式，例如<div class="page_break"></div> 或 <div class="page-break-after:always;"></div>*/
        .page_break { page-break-after:always;}
    </style>

</head>

<body>
<div class="top_info">
    <!-- 左上方二维码及物料编码 -->
    <div class="left_info">
        <object type="image/barcode" style="width: 120px ; height: 30px;" data-th-value="${materialCode}" format="CODE_128" ><hr style="border: 0.5px solid #000000;" /></object>
        <span class="font_middle" data-th-text="${materialCode}"></span>
    </div>

    <!-- 右上方物料编码及二维码 -->
    <div class="right_info">
        <span class="font_middle" data-th-text="${materialCode}" style="margin-right: 10px;"></span>
        <object type="image/barcode" style="width: 70px ;height: 70px ;float: right;" data-th-value="${materialCode}"><hr style="border: 0.5px solid #000000;" /></object>
    </div>
</div>

<!-- 中间表格 -->
<div>


    <table border="0" style=" width: 80%; height: 100%;  font-size: 7.5px; margin-top: 10px; ">

        <tbody>
        <tr style="height: 30px;">
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;">物料名称</td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;" data-th-text="${materialName}"></td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;">物料编码</td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;" data-th-text="${materialCode}"></td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;">规格</td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;" data-th-text="${materialSpec}"></td>
        </tr>
        <tr style="height: 30px;">
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;">项目名称</td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;" data-th-text="${projectName}"></td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;">项目编号</td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;" data-th-text="${projectCode}"></td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;">批次号</td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;" data-th-text="${batch_no}"></td>
        </tr>
        <tr style="height: 30px;">
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;">数量</td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;" data-th-text="${materialQty}"></td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;">序列号</td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;" data-th-text="${serialNum}"></td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;">采购订单</td>
            <td style=" border-color: #000000;border-style: solid;  text-align: center; font-size: 20px;"></td>
        </tr>
        </tbody>

    </table>
</div>

<!-- 下方条形码、物料编码+序列号+数量 -->
<div class="bottom_info">
    <object type="image/barcode" style="width: 210px ; height: 30px;" data-th-value="${dn}" format="CODE_128" ><hr style="border: 0.5px solid #000000;" /></object>
    <div style="text-align: left;">
        <span class="font_middle" data-th-text="${dn}"></span>
    </div>
</div>
</body>
